<template>
  <a-tree-select
    v-model:value="value"
    style="width: 100%"
    :tree-data="provinceAndCityData"
    tree-checkable
    allow-clear
    :show-checked-strategy="TreeSelect.SHOW_CHILD"
    placeholder="请选择城市"
    tree-node-filter-prop="label"
    allowClear
    v-bind="props"
    @change="changeTreeSelect"
  />
</template>
<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { TreeSelect } from 'ant-design-vue';
  import { provinceAndCityData } from '@/components/Form/src/utils/areaDataUtil';

  const emit = defineEmits(['update:cityValue']);
  const props = defineProps({
    disabled: {
      type: Boolean,
      default: false,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    cityValue: {
      type: String,
      default: [],
    },
  });

  const value = ref<string[]>([]);

  watch(
    () => props.cityValue,
    (newValue, oldValue) => {

      value.value = newValue ? newValue.split(',') : [];
    }
  );

  const changeTreeSelect = (value, label, extra) => {
    const updatedCityValue = value.join(',');
    emit('update:cityValue', updatedCityValue);
  };
</script>

<style scoped lang="less"></style>
